<template>
  <q-page>
    <q-search :value="query" icon="search" autofocus="true"
                float-label="搜索影片"
                @change="onChange" />

    <q-list separator no-border v-if="query">
      <q-list-header>搜索结果： <b class="text-primary">{{list.length}}</b></q-list-header>
      <q-item-separator />
      <q-item v-for="item in list" :key="item.id" 
              :to="'/douban/movie/setting/' + item.id">
        <q-item-main>
          <q-item-tile label>{{ item.name }} ({{item.releaseDate}})</q-item-tile>
          <q-item-tile sublabel v-if="item.score>0">评分:{{item.score/10}}, 评价人数:{{item.ratingCount}}</q-item-tile>
          <q-item-tile sublabel v-if="item.score<=0">想看人数:{{item.wishCount}}</q-item-tile>
        </q-item-main>
        <q-item-side right icon="chevron_right" />
      </q-item>
    </q-list>
  </q-page>
</template>

<script>
import Douban from '../api/movie.js';

export default {
  name: 'DoubanMovieSearch',
  data() {
    return {
      title: '豆瓣影片搜索',
      query: '',
      list: []
    }
  },
  mounted() {
    let me = this;
    this.$api.ui.pageBackBtn = function(){
      me.$router.push('/movie');
    }
  },
  methods: {
    onChange(val) {
      this.query = val;
      this.list = [];
      if(this.query) {
        let me = this;
        Douban.searchMovie(val, res=>{
          me.list = res.data.model;
        });
      }
    }
  }
}
</script>
